<script setup lang="ts">
import { request } from '@/api';
import { onMounted, ref } from 'vue';
// 1. 地址
const address = ref<MkAddress>({} as MkAddress)
const showArea = ref(false)
//2.获取美寇那边的地址数据
onMounted(async () => {
  const res = await mk.getAreaColumns()
  console.log(res);

})
const areaList = ref<AreaColumns>({
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    // ....
  },
})
// 省市区弹窗点击确定
const onConfirmArea = ({ selectedValues, selectedOptions, selectedIndexes }: { selectedValues: number[]; selectedOptions: { text: string }[]; selectedIndexes: number[] }) => {
  console.log(selectedValues, selectedOptions, selectedIndexes)
  const arr = selectedOptions.map((item: { text: string }) => item.text)
  console.log(arr);
  //获取省市区名称
  address.value.fullLocation = arr.join(' ')
  //获取省市区code
  address.value.provinceCode = selectedValues[0].toString()
  address.value.cityCode = selectedValues[1].toString()
  address.value.countyCode = selectedValues[2].toString()
  showArea.value = false
}


// 保存编辑数据
const onSubmit = async () => {
  try {
    const res = await request<MkResponse<MkAddress>>({
      url: 'member/address',
      method: 'post',
      data: address.value
    })
    console.log(res);
  } catch (error) {
    console.log('错误信息' + error);
  }


}
</script>

<template>
  <div class="address-edit-page">
    <van-cell-group>
      <van-field label="收货人" placeholder="请输入收货人" v-model="address.receiver"></van-field>
      <van-field label="手机号码" placeholder="请输入手机号码" v-model="address.contact"></van-field>
      <van-field label="所在地区" @click="showArea = true" placeholder="请输入所在地区" v-model="address.fullLocation"
        readonly></van-field>
      <van-popup v-model:show="showArea" position="bottom" :style="{ height: '45%' }">
        <van-area title="选择地区" :area-list="areaList" @cancel="showArea = false" @confirm="onConfirmArea" />
      </van-popup>
      <van-field label="详细地址" type="textarea" v-model="address.address" placeholder="请输入详细地址">
      </van-field>
      <van-field label="设为默认地址" v-model="address.isDefault" readonly>
        <template #extra>
          <van-checkbox :icon-size="20" checked-color="var(--mk-red)"></van-checkbox>
        </template>
      </van-field>
    </van-cell-group>
    <div class="submit">
      <van-button round block type="primary" @click="onSubmit">
        保存
      </van-button>
    </div>
  </div>
</template>

<style lang="css" scoped>
.address-edit-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  height: 80px;
}

.geo {
  width: 250px;
  height: 250px;
  overflow-y: auto;
}

.geo-title {
  font-size: 14px;
  color: var(--mk-gray);
  padding: 8px;
}

.geo-item {
  border-top: 0.5px solid var(--mk-under);
  padding: 8px;
}

.geo-item-label {
  font-size: 14px;
  color: var(--mk-red);
}

.geo-item-value {
  font-size: 12px;
  color: var(--mk-gray);
}
</style>